<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    .cell {
        position: relative;
        width: 21%;
        margin: 2%;
        padding-top: 21%; /* 为什么是21% */
        border-radius: 100px; /* 为什么这里是数值，而不是50% */
        font-size: 30px;
        float: left;
        background: #333;
        color: #f9f9f9;
        cursor: pointer;
    }
    .point{
    width: 46%;
    }
    .cell-inner {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translateY(-50%);
    }

    .operate-cell {
        background: #f98c11;
    }
</style>
<body>
<div class="keybord-box">
    <div class="cell input-cell">
        <div class="cell-inner">7</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">8</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">9</div>
    </div>
    <div class="cell operate-cell">
        <div class="cell-inner">×</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">4</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">5</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">6</div>
    </div>
    <div class="cell operate-cell">
        <div class="cell-inner">-</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">1</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">2</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">3</div>
    </div>
    <div class="cell operate-cell">
        <div class="cell-inner">+</div>
    </div>
    <div class="cell input-cell">
        <div class="cell-inner">0</div>
    </div>
    <div class="cell input-cell ">
        <div class="cell-inner">.</div>
    </div>
    <div class="cell operate-cell point">
        <div class="cell-inner">=</div>
    </div>
</div>
</body>
</html>